<template>
  <div class="wrapper">
    x:{{ x }}
    y:{{ y }}
    <hr>
    <div class="img-wrapper">
      <div class="loading" v-if="!imgInfo.imgUrl&&!imgInfo.errMsg">加载中。。。。</div>
      <img  v-if="imgInfo.imgUrl" :src="imgInfo.imgUrl" alt="" srcset="">
      <div v-if="imgInfo.errMsg">错误消息{{ imgInfo.errMsg }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '',
})
</script>
<script lang="ts" setup>
import getMousexy from '@/hooks/getMousexy'
import {reactive,onMounted } from 'vue'
import axios,{AxiosError} from 'axios'

let imgInfo= reactive({
  imgUrl:'',
  errMsg:''
})
 
let {x,y} = getMousexy();
// let x = ref(0)
// let y = ref(0)
// // 获取鼠标的位置及其显示
// function clickFn (e:MouseEvent){
//     x.value = e.clientX
//     y.value = e.clientY
// }
function getImgInfoFn(){
  try {
    axios.get('https://api.thecatapi.com/v1/images/search').then(res=>{
    imgInfo.imgUrl = res.data[0].url;
  }).catch(err=>{
    imgInfo.errMsg = err.message
  })
  } catch (error) {
    imgInfo.errMsg = (error as AxiosError).message
  }
}

// 挂载完成
onMounted(() => {
  // 给文档绑定鼠标事件
  // document.addEventListener('click', clickFn)
  getImgInfoFn()
})
</script>

<style lang="less" scoped></style>
